<template>
  <div class="head-container">
    <div ref="imageRef" class="header-image"></div>
    <div @click="switchCollapse" class="header-collapse">
      <template v-if="props.isCollapse">
        <el-button
          ><el-icon><Expand /></el-icon
        ></el-button>
      </template>
      <template v-else>
        <el-button>
          <el-icon><Fold /></el-icon>
        </el-button>
      </template>
    </div>
    <div class="header-user">
      <div
        ref="userRef"
        class="header-user-item"
        @mouseover="showUserMenu"
        @mouseout="hideUserMenu"
      >
        <div ref="userMenuRef">
          <my-user-menu></my-user-menu>
        </div>
        <el-avatar
          class="header-user-avatar"
          :src="getUserAvatarUrl()"
        ></el-avatar>
        <span>{{ getUserInfo() == null ? '' : getUserInfo().name }}</span>
      </div>
      <el-popconfirm
        title="你确定要退出登录吗?"
        confirm-button-text="确定"
        cancel-button-text="取消"
        @confirm="loginout"
      >
        <template #reference>
          <div class="header-user-item">
            <el-icon><SwitchButton /></el-icon>
            <span>退出</span>
          </div>
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { loginout as userLoginout } from '../functions/login';
import { baseImagesUrl } from '../utils/request';
import { getUserInfo } from '../functions/userInfo';
import { onMounted, ref } from 'vue';
import MyUserMenu from './MyUserMenu.vue';

import 'animate.css';

const props = defineProps({
  isCollapse: Boolean,
});

const router = useRouter();

const emit = defineEmits();

const userRef = ref(null);
const imageRef = ref(null);
const userMenuRef = ref(null);

const showUserMenu = () => {
  const userMenu = userMenuRef.value as HTMLElement | null;
  if (userMenu) {
    userMenu.style.display = 'block';
    userMenu.classList.remove('animate__animated', 'animate__bounceOutUp');
    userMenu.classList.add('animate__animated', 'animate__bounceInDown');
  }
};
const hideUserMenu = () => {
  const userMenu = userMenuRef.value as HTMLElement | null;
  if (userMenu) {
    userMenu.classList.remove('animate__animated', 'animate__bounceInDown');
    userMenu.classList.add('animate__animated', 'animate__bounceOutUp');
  }
};

const loginout = () => {
  userLoginout();
  router.push('/login');
};
const switchCollapse = () => {
  emit('switch-collapse');
};
const getUserAvatarUrl = () => {
  return (
    baseImagesUrl +
    (getUserInfo() == null ? '' : getUserInfo().id + '/' + getUserInfo().avatar)
  );
};

onMounted(() => {
  const image = imageRef.value as HTMLElement | null;
  if (image) {
    image.addEventListener('animationend', () => {
      image.classList.remove('animate__animated', 'animate__wobble');
    });
    setInterval(() => {
      image.classList.add('animate__animated', 'animate__wobble');
    }, 5000);
    const menu = userMenuRef.value as HTMLElement | null;
    if (menu) {
      menu.style.display = 'none';
    }
  }
});
</script>

<style scoped lang="scss">
.head-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.header-collapse {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 100%;
}
.header-image {
  width: 20vw;
  height: 100%;
  background-image: url('/text-image.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.header-user {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 1.2rem;
  color: #333;
}
.header-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
.header-user-item {
  position: relative;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.header-user-item:hover {
  background-color: #eee;
}
</style>
